<template>
    <div class="mainContent">
        <path-tracking :path='path' />
        <div class="pageContent">
            <for-follow-up 
                ref="basicInfo"
                :choosenReasult="choosenReasult"
            />
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
                <div class="tableText">跟进事由</div>
            </div>
            <div class="bgBox">
                <div class="followReason">
                    <div class="selectBox" ref="choosenWay">
                        <label class="reasonLabel">跟进方式</label>
                        <el-select
                            size="small"
                            v-model="choosenWay"
                            placeholder="请选择"
                            style="width: 20rem; margin-left: 1rem;"
                        >
                            <el-option
                                v-for="item in fowllowWays"
                                :key="item.value"
                                :label="item.label" 
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="selectBox" ref="choosenReason">
                        <label class="reasonLabel">跟进事由</label>
                        <el-select
                            size="small"
                            v-model="choosenReason"
                            placeholder="请选择"
                            style="width: 20rem; margin-left: 1rem;"
                        >
                            <el-option
                                v-for="item in shebangsArr"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="selectBox" ref="choosenReasult">
                        <label class="reasonLabel">跟进结果</label>
                        <el-select
                            size="small"
                            v-model="choosenReasult"
                            placeholder="请选择"
                            style="width: 20rem; margin-left: 1rem;"
                            @change="changeResult"
                            :disabled="choosenReason == ''"
                        >
                            <el-option
                                v-for="item in followReasultArr"  
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="selectBox" ref="notoCause">
                        <label class="reasonLabel" v-if="showCause">未到店原因</label>
                        <el-select
                            v-if="showCause"
                            size="small"
                            v-model="notoCause"
                            placeholder="请选择"
                            style="width: 20rem; margin-left: 1rem;"
                        >
                            <el-option
                                v-for="item in notoCauseArr"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
                <div class="tableText">跟进说明</div>
            </div>
            <div class="bgBox">
                <div style="padding-bottom: 1rem;" ref="remarks">
                    <el-input type='textarea' rows="5" style="width: 100%;resize: none;" v-model="remarks" />
                </div>
            </div>
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
                <div class="tableText">跟进记录</div>
            </div>
            <div class="bgBox">
                <div style="padding-bottom: 1rem;">
                    <div class="logCan" v-for="(item, index) in memo" :key="index">
                        <div class="Time_Name" v-if="item.type === 2">
                            <div>{{item.createTime}}</div>
                            <div style="margin-top: 1rem;">店员：{{item.supportStaff}}</div>
                        </div>
                        <div class="memoContent" v-if="item.type === 2">
                            <p v-for="(ele, ind) in item.content.split(',')" :key="ind">{{ele}}</p>
                        </div>
                        <!-- <div class="memoContent" v-else>
                            {{item.content}}
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="btnsCan">
                <div class="btnLayout">
                    <div class="btn" @click="doSave">确定</div>
                    <div class="btn cancel" @click="doCancel">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import pathTracking from '@/components/common/pathTracking'
    import forFollowUp from '../../component/basicInfos/forFollowUp.vue'
    import datas from './datas.js'
    import { getProvince, getCity, getDistrict, getShop, getShebangs, getFollowReasult, getFollowNotoCause } from './axios'
    import { getDetail } from '../../component/seeDetail/axios.js'
    import { modifyOrder, getPlanTime } from '../axios.js'
    export default {
        name: 'followUp',
        data() {
            return {
                path: ['CRM', '预约管理', {label: '预约查询', name: 'allBooked'}, '客服跟进'],
                area: '',
                // 预约地址连级选择
                optionsStore: [],
                // 门店列表
                storeList: [],
                // 跟进事由选项
                shebangsArr: [],
                // 跟进结果选项
                followReasultArr: [],
                // 未到店原因
                notoCauseArr: [],
                // 跟进事由
                choosenReason: '',
                // 跟进结果
                choosenReasult: '',
                // 未到店原因
                notoCause: '',
                showCause: false,
                memo: [],
                // 备注
                remarks: '',
                // 跟进方式
                choosenWay: '',
                fowllowWays: [
                    {
                        label: '电话',
                        value: '电话'
                    },
                    {
                        label: '短信',
                        value: '短信'
                    },
                    {
                        label: '微信',
                        value: '微信'
                    },
                    {
                        label: '其它',
                        value: '其它'
                    }
                ]
            }
        },
        components: {
            pathTracking,
            forFollowUp
        },
        methods: {
            // 存
            doSave() {
                // 详细信息
                let basicInfo = this.$refs.basicInfo.getResult();
                // 基础信息未填完整
                if(!basicInfo) {
                    return
                }
                // 客户标签
                basicInfo.followUpRecords = [];

                let flag = this.choosenReasult === '取消到店'
                // 跟进记录
                this.choosenWay ? this.$refs.choosenWay.classList.remove('qxz_redInput') : this.$refs.choosenWay.classList.add('qxz_redInput')
                this.choosenReason ? this.$refs.choosenReason.classList.remove('qxz_redInput') : this.$refs.choosenReason.classList.add('qxz_redInput')
                this.choosenReasult ? this.$refs.choosenReasult.classList.remove('qxz_redInput') : this.$refs.choosenReasult.classList.add('qxz_redInput')
                if(flag) {
                    this.notoCause ? this.$refs.notoCause.classList.remove('qxz_redInput') : this.$refs.notoCause.classList.add('qxz_redInput')
                    if(!this.notoCause) {
                        return
                    }
                }
                // 取消到店更改状态
                if(this.choosenReasult === '取消到店') {
                    basicInfo.auditingStatus = 5
                }
                if(!this.choosenReason || !this.choosenReasult || !this.choosenWay) {
                    return
                }
                if(this.remarks == '' || /^[ ]*$/.test(this.remarks)) {
                    this.$message({
                        message: '请填写跟进说明',
                        type: 'warning'
                    })
                    return
                }
                let memo = `跟进方式：${this.choosenWay},跟进事由：${this.choosenReason},跟进结果：${this.choosenReasult}${flag ? ',未到店原因：' : ''}${flag ? this.notoCause : ''}`

                // 备注
                // this.remarks && basicInfo.followUpRecords.push({
                //     content: this.remarks, 
                //     type: 3
                // })
                let obj = {
                    content: memo,
                    followUpDetail: `跟进说明：${this.remarks}`,
                    type: 2
                }
                basicInfo.followUpRecords.push(obj);

                // 客服创建的就是1，到店就是2
                basicInfo.type = 2;
                // 跟进
                modifyOrder(basicInfo).then(res => {
                    if(res.data.status === 200) {
                        this.$message({
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        });
                        this.sucCallback()
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            // 选择结果
            changeResult() {
                this.choosenReasult === '取消到店' ? this.showCause = true : this.showCause = false
            },
            sucCallback() {
                // this.$refs.basicInfo.clearInput();
                this.clearInput();
                this.$router.replace({name: 'allBooked'})
            },
            // 点击取消，返回列表页
            doCancel() {
                this.clearInput();
                this.$router.replace({name: 'allBooked'})
            },
            // 获取详情分发数据
            getDetail() {
                let searchKey = this.$route.query.searchKey
                searchKey && getDetail(searchKey).then(res => {
                    if(res.data.status === 200) {
                        this.previousData = res.data.result;
                        // 显示上次的跟进人
                        this.followUpBy = res.data.result.supportStaff;
                        // 跟进记录
                        let memosList = res.data.result.followUpRecords;
                        let memo = [];
                        Array.isArray(memosList) && memosList.map(ele => {
                            memo.push(ele);
                        })
                        this.memo = memo;
                        // 给组件数据
                        this.$refs.basicInfo.dispatchData(res.data.result)
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            clearInput() {
                this.remarks = ''
                this.notoCause = ''
                this.showCause = false
                this.choosenReasult = ''
            }
        },
        mounted() {
            // select options
            // 跟进事由
            getShebangs().then(res => {
                if(res.data.status === 200) {
                    this.shebangsArr = res.data.result
                }
            }).catch(err => {
                console.log('err: ', err)
            })
            // 跟进结果
            getFollowReasult().then(res => {
                if(res.data.status === 200) {
                    this.followReasultArr = res.data.result
                }
            }).catch(err => {
                console.log('err: ', err)
            })
            // 未到店原因
            getFollowNotoCause().then(res => {
                if(res.data.status === 200) {
                    this.notoCauseArr = res.data.result
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        activated() {
            this.getDetail()
        }
    }
</script>
<style scoped>
    .pageContent{
        margin: 16px;
        border-radius: 8px;
        overflow: hidden;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem;
    }
    .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 14px;
        font-weight: bold;
        color: #715D4A;
    }
    .infosBox{
        width: 90%;
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        justify-content: space-between;
    }
    .infosBox>.columns{
        width: 33%;
    }
    .infoItems{
        width: 100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        height: 4rem;
        line-height: 4rem;
        font-size: 1.4rem;
    }
    .infoItems>.label{
        color: #8C8C8C;
    }
    .infoItems>.value{
        color: #272727;
    }
    .logCan{
        width: 90%;
        display: flex;
        font-size: 1.4rem;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 2rem;
    }
    .memoContent{
        margin-left: 4rem;
    }
    .Time_Name{
        color: #8C8C8C;
    }
    .Time_Name div{
        text-align: right;
    }
    .followReason{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .reasonLabel{
        font-size: 1.4rem;
    }
    .couple{
        width: 30rem;
        display: flex;
        height: 4rem;
        font-size: 1.4rem;
        align-items: center;
        justify-content: center;
        color: #222222;
    }
    .lines{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .normal{
        flex: 1;
        display: flex;
        margin-left: 1rem;
    }
    .timeRange{
        flex: 1;
        display: flex;
        margin-left: 1rem;
    }
    .labels{
        width: 8rem;
        text-align: right;
    }
    .labels img{
        vertical-align: middle;
        margin-bottom: 2px;
    }
    .btnsCan{
        background: #FFF;
        padding: 1.5rem 0;
    }
    .btnLayout{
        text-align: center;
    }
    .btn{
        display: inline-block;
        width: 120px;
        height: 40px;
        border-radius: 20px;
        background: #7e6b5a;
        text-align: center;
        line-height: 40px;
        color: #FFF;
        font-size: 14px;
        cursor: pointer;
        margin: 0 8px;
    }
    .cancel{
        background: #000;
    }
    .selectBox{
        width: 29rem;
        height: 4rem;
        display: flex;
        align-items: center;
    }
</style>